<template>
	<view class="t-list">
		<!-- <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="i in 5">
				<view class="item">
					<image src="../../static/user.png" class="bg" mode=""></image>
					<view class="cont">
						<image src="../../static/play_bg.png" class="bnt" mode=""></image>
						教你如何用AI定制自己的专属美甲
					</view>
				</view>
			</swiper-item>
		</swiper> -->
		<!-- <scroll-view class="tab-scroll-bar" scroll-y="true" scroll-with-animation @scroll="onScroll"> -->
			<view class="item mtb" v-for="(item,index) in info" :key="item.id">
				<!-- <image :src="item.url+'?x-oss-process=video/snapshot,t_0,f_jpg'" class="bg" mode=""></image> -->
				<video class="video" :id="'video'+index" :src="item.url" :poster="item.url" @play="playVideo" show-fullscreen-btn controls object-fit="cover"></video>
				<!-- <Videobox :video="item.url"></Videobox> -->
				<view class="cont" v-if="false">
					<image src="../../static/play_bg.png" class="bnt" mode=""></image>
				</view>
				<view class="title">
					{{item.video}}
				</view>
			</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	// import Videobox from '@/components/video/index.vue'
	import {getQueryVideo} from '@/api/base.js'
	export default {
		components:{
			// Videobox
		},
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				info: []
			};
		},
		onLoad() {
			this.getInfo()
		},
		methods:{
			onScroll() {
				let that = this;
				if (!that.$u.test.isEmpty(that.video)) {
					this.$u.getRect('.' + that.video.id).then(rect => {
						// console.log("元素距离"+JSON.stringify(rect));
						if (rect.top <= 0) {
							//第一种情况 向上滑动 滑过顶部到不可见区域
							console.log("向上滑动false");
							that.video.pause();
						} else if (rect.top > this.windowHeight) {
							//第二种情况 向下滑动 滑过底部到不可见区域
							console.log("向下滑动false");
							that.video.pause();
						} else {
							//可见区域
							console.log("true");
						}
					})
				}
			},
			getInfo(){
				getQueryVideo().then((res) => {
					this.info = res
				})
			},
			playVideo(event){
				console.log('打印',event);
				// 获取当前播放视频的id
				let vid = event.currentTarget.id;
				// 如果播放的视频不等于默认的,并且存在这么一个视频对象,那么让这个视频对象暂停
				this.vid !== vid && this.videoContext && this.videoContext.pause()
				//视频对象换成最新的
				this.videoContext = uni.createVideoContext(vid)
				// 视频的id也换成当前点击的最新的了
				this.vid = vid;
			}
		}
	}
</script>

<style lang="less" scoped>
.t-list{
	margin: 0 32rpx;
	padding-top: 32rpx;
}
.swiper{
	height: 430rpx;
	margin-bottom: 32rpx;
}
.item{
	position: relative;
	.video{
		width: 686rpx;
	}
	.bg{
		width: 686rpx;
		height: 360rpx;
	}
	.cont{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
	}
	.bnt{
		width: 120rpx;
		height: 120rpx;
		display: block;
		margin: 0 auto;
		margin-top: 94rpx;
		margin-bottom: 62rpx;
	}
	.title{
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D3D3D;
		margin-top: 20rpx;
	}
}
.mtb{
	margin-bottom: 60rpx;
}
</style>
